<template>
  <div>
    <el-button size="mini" class="primary-light-2" @click="showXml">{{ $t('查看流程') }}</el-button>
    <!-- <li style="margin-right: 10px;">
      <el-button size="mini" type="info" class="primary-light-1" @click="showXml">{{ $t('查看流程') }}</el-button>
    </li> -->
    <el-dialog v-if="imageOpen" :title="$t('流程图')" :close-on-click-modal="false" :visible.sync="imageOpen" width="50%" custom-class="dialogForm" append-to-body :lock-scroll="false">
      <!-- <el-image v-if="processKey !== 'act_free_flow_approval'" v-loading="loading" :src="processData.photoBase64">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline" />
        </div>
      </el-image>-->
      <div>
        <actFlowFormChart v-if="processData.processDefinitionKey !== 'act_free_flow_approval'" ref="actFlowFormChart" />
      </div>

      <span v-if="processKey === 'act_free_flow_approval'">
        <div style="text-align: center;margin-top: 50px;margin-bottom: 50px">
          <span v-html="$t('该功能配置流程为自由流审批<br>')" />
          <span v-html="$t('在流程启动时由流程发起人选择审批人<br>')" />
          <span v-html="$t('选择的审批人按顺序进行审批<br>')" />
        </div>
      </span>
    </el-dialog>
  </div>

</template>

<script>

import { showFlowChart } from '@/api/act/process/actProcess'
import ActFlowFormChart from '@/views/act/process/actFlowFormChart'
export default {
  name: 'ActViewFlowChart',
  components: {
    ActFlowFormChart
  },
  props: {
    processKey: {
      type: String,
      required: false,
      default: null
    },
    menuKey: {
      type: String,
      required: false,
      default: null
    }
  },
  data() {
    return {
      // 流程图片是否展示
      imageOpen: false,
      processData: {}
    }
  },
  created() {
  },
  mounted: function() {

  },
  methods: {
    // 打开流程详情页面显示XML
    showXml() {
      this.imageOpen = true
      this.$nextTick(() => {
        this.$refs.actFlowFormChart.init(this.processKey)
      })
    },
    showImage() {
      this.$nextTick(() => {
        showFlowChart(this.processKey).then(response => {
          this.imageOpen = true
          this.loading = true
          this.processData.photoBase64 = response.data
          this.loading = false
        })
      })
    }

  }
}
</script>

